<template>
	<view class="page">
		<list reqUrl="/api/applytxlog" emptyText="暂无记录" ref="listInstance">
			<template v-slot=" { list }">
				<view class="record" v-for="item in list" :key="item.tx_id">
					<view class="top">
						<view class="title one-line">
							提现至{{ item.account_type_name }}
						</view>
						<text class="status">{{ item.state_name}}</text>
					</view>
					<view class="des">申请金额：￥{{ item.app_total }}</view>
					<view class="des">手续费率：￥{{ item.server_charge }}</view>
					<view class="des">
						实际到账金额：
						<text class="special">￥{{ item.sjdz_total }}</text>
					</view>
					<view class="des">提现单号：{{ item.code }}</view>
					<view class="des">申请时间：{{ item.create_at }}</view>
					<view v-if="item.dj_time" class="des">审核时间：{{item.dj_time}}</view>
					<template v-if="item.account_type===2">
						<view class="des">提现开户银行：{{item.bank}}</view>
						<view class="des">提现银行卡号：{{item.bank_num}}</view>
					</template>
					<view v-if="item.remark" class="des">费用计算明细：{{item.remark}}</view>
					<view v-if="item.dj_remark" class="des">备注：{{item.dj_remark}}</view>
				</view>
			</template>
		</list>
	</view>
</template>

<script setup>
	import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { secondaryColor } = useGetThemColor();

	const listInstance = ref(null);

	// * 下拉刷新事件
	onPullDownRefresh(() => {
		Promise.all([listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});
	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});
</script>
<style scoped lang="scss">
	.record {
		padding: 10px 0;

		&+.record {
			border-top: 1px solid #f8f8f8;
		}

		.top {
			display: flex;
			font-weight: bold;

			.title {
				flex: 1;
				padding-right: 10px;
			}

			.status {
				color: v-bind(secondaryColor);
			}
		}

		.des {
			margin-top: 8px;
			font-size: 12px;
			color: #999;
		}

		.special {
			color: v-bind(secondaryColor);
		}
	}
</style>